import { useState } from 'react';
import { DndContext } from '@dnd-kit/core';

import { Droppable } from './Droppable';
import { Draggable } from './Draggable';
/**
 * @description: 列表拖动
 * @return {*}
 */
function App() {
  const containers = ['A', 'B', 'C'];
  const [parent, setParent] = useState(null);
  // drag组件
  const draggableMarkup = (
    <Draggable id="draggable">Drag me</Draggable>
  );

  return (
    <DndContext onDragEnd={handleDragEnd}>
      {parent === null ? draggableMarkup : null}

      {containers.map((id) => (
        // ASD containers是固定的从上到下ABC,但是根据drag放置的位置的不同，动态修改parent，从而动态修改Drop的插槽,实现拖动，有一种换位置的感觉，其实只是设置不同的插槽
        <Droppable key={id} id={id}>
          {parent === id ? draggableMarkup : 'Drop here'}
        </Droppable>
      ))}
    </DndContext>
  );

  function handleDragEnd(event) {
    const { over } = event;

    // 如果项目放置在容器上，请将其设置为父项
    // 否则将父级重置为 'null'
    setParent(over ? over.id : null);
  }
};
export default App